<template>
	<view>
		<view class="position-info">
			<view class="position-name" v-if="positionValue.spaceType != 3" style="display: flex;align-items: center;">
				<!-- <i></i> -->
				<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage2/cwf.png" mode="" style="width:52rpx;height:52rpx"></image>
				<span style="margin-left: 10rpx;">
					{{userObj.proName}} {{userObj.parking_lot_name}}
				</span>
			</view>
			<!-- <view class="position-name" v-else>{{proName}}-{{parking_lot_name}}</view> -->
			<view class="position" style="margin-top: 15px;">
				<view style="margin-bottom: 11px;color: #333">
					<span style="color:#999">车位类型：</span>
					{{
                            positionValue.spaceType == 1
                            ? '产权车位'
                            :positionValue.spaceType == 2
                            ? '租赁车位'
                            :positionValue.spaceType == 3
                            ? '不固定车位'
                            :'暂无'
                            }}
				</view>
			</view>
			<view style="margin-bottom: 11px;color: #333">
				<span style="color:#999">车位号：</span>
				{{userObj.ps_number}}
			</view>

			<view style="margin-bottom: 11px;color: #333">
				<span style="color:#999">周期费用：</span>
				{{userObj.payment_cycle}}个月一周期，每期{{userObj.cost_per_period}}元</span>
			</view>

			<view style="margin-bottom: 11px;color: #333">
				<span style="color:#999">车位用户信息：</span>
				{{userObj.position + ' ' + userObj.driving_name + ' '}}
			</view>
			<view style="margin-bottom: 11px;color: #333">
				<span style="color:#999">合同到期时间：</span>
				{{userObj.contract_cycle_last}}
			</view>
			<view class="btn-big">
				<view class="btn-pay" @click="show = true"
					v-if="listdata.lenght==0||(listdata.lenght>0&&listdata[0].driving_state!=3)">
					预缴费用
				</view>
			</view>
		</view>
		<view style="padding: 30rpx 50rpx;background-color: #FFFFFF;height: 68vh;overflow: auto;">
			<view class="list" @click="clickInfo(item,index)" v-for="(item,index) in listdata">
				<!-- :style="item.choose ? 'background: #F9A832;':''" -->
				<!-- {{item.choose}} -->
				<view class="redio" v-if="!item.choose">

				</view>
				<image v-else class="redio" :style="item.choose ? 'border: none;' : ''" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImagegou.png"
					mode=""></image>
				<view class="list-detail">
					<view>
						<view class="tobepaid" v-if="item.driving_state == 1">待缴</view>
						<view class="pass" v-if="item.driving_state == 2">已缴</view>
						<view class="arrears" v-if="item.driving_state == 3">欠费</view>
						<view class="tobepaid" style="color: green;" v-if="item.driving_state == 4">预缴</view>
						<view class="dates">{{item.begin_time}} 至 {{item.last_time}}</view>
					</view>
					<view class="pay-count">
						{{item.new_money}} <span style="font-size: 15px;color: #333;margin-left: 5px;">元</span>
					</view>
				</view>
			</view>
		</view>
		<view class="payment">
			<view class="redios" @click="clickChooseAll">
				<view v-if="chooseList.length != listdata.length" class="redio"></view>
				<image v-else class="redio" :style="chooseList.length == listdata.length ? 'border: none;' : ''"
					src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/gou.png" mode=""></image>
				<view class="font-all" v-if="!chooseAll">全选</view>
				<view class="font-all" v-else>取消全选</view>
			</view>
			<view class="pay-all">
				<view>合计：</view>
				<view class="amount">￥{{tatleMoney}}</view>
				<view class="btn-pay1" @click="toPay">缴费</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" length="35%">
			<view class="bjq">
				<u-number-box v-model="num" @plus="clickPlus" :min="1" :input-width="100" :input-height="60">
				</u-number-box>
				<view class="u-flex u-row-between">
					<u-button size="medium" @click="cancel" :custom-style="customStyle">取消</u-button>
					<u-button type="warning" size="medium" @click="confirm" :custom-style="customStyle">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				positionValue: {
					id: '',
					spaceType: ''
				},
				loading: false,
				listdata: [],
				proName: '',
				parking_lot_name: '',
				ps_number: '',
				driving_number: '',
				chooseList: [],
				list1: [],
				list2: [],
				tatleMoney: 0,
				chooseAll: false,
				show: false,
				customStyle: {
					margin: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象

				},
				num: 1,
				bankData: {},
				homelist: {},
				name: '',
				address: '',
				userObj: {},
			}
		},
		async onLoad(option) {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist.costsPeriodUnit)
			this.name = this.homelist.proName;
			this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist
				.roomUnitNumber +
				'-' + this.homelist.roomCode

			const item = JSON.parse(decodeURIComponent(option.item));
			this.userObj = item
			console.log('itemitemitemitemitemitemitemitemitem', item)
			this.positionValue = {
				id: item.id,
				spaceType: item.parking_lot_type
			}
			this.proName = this.userObj.proName;
			this.parking_lot_name = this.userObj.parking_lot_name;
			this.ps_number = this.userObj.ps_number;
			this.driving_number = this.userObj.driving_number;
			await this.getInfo()
		},
		methods: {
			// 缴费
			toPay() {
				console.log(this.positionValue.id)
				if (this.tatleMoney) {
					let periodList = [];
					for (let i = 0; i < this.chooseList.length; i++) {
						periodList.push({
							id: this.chooseList[i]
						})
					}
					console.log(this.tatleMoney, uni.getStorageSync('phone'), this.positionValue.id, periodList)
					this.$request.api.payPosition({
						allMoney: this.tatleMoney,
						phone: uni.getStorageSync('phone'),
						vehicleId: this.positionValue.id,
						costList: periodList,
						room_id: uni.getStorageSync('projectItem').roomId,
					}).then(res => {
						if (res.data.code == 0) {
							uni.redirectTo({
								url: '/homePage1/payPosition/payPosition?list=' + JSON.stringify(res.data.data)
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							})
						}
					})
				}
			},
			// 计步器
			cancel() {
				this.show = false;
			},
			confirm() {
				if (this.positionValue.spaceType == 1 && this.num > 10) {
					uni.showToast({
						icon: 'none',
						title: '每次只能预缴10期'
					})
					return
				}
				this.$request.api.advancePayment({
					zhuYeApp: 1,
					vehicleId: this.positionValue.id,
					periods: this.num,
					spaceType: this.positionValue.spaceType
				}).then(res => {
					console.log(res)
					this.show = false;
					if (res.data.code === 0) {
						let tmp = []
						tmp = res.data.data.datalist;

						for (let i = 0; i < tmp.length; i++) {
							tmp[i].choose = false;
						}
						this.listdata = tmp;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return
					}
					this.chooseAll = false
					this.tatleMoney = 0;
					this.chooseList = [];
					this.list1 = [];
					this.list2 = [];
					this.loading = true;
					uni.hideLoading();

				})

			},
			clickPlus(value) {
				console.log(value)
			},
			clickChooseAll() {
				let tmp = this.listdata
				this.tatleMoney = 0;
				this.list1 = [];
				this.list2 = [];
				if (this.chooseAll) {
					this.chooseAll = false;
					for (let i = 0; i < tmp.length; i++) {
						tmp[i].choose = false;
					}
				} else {
					this.chooseAll = true;
					for (let i = 0; i < tmp.length; i++) {
						tmp[i].choose = true;
						this.tatleMoney += Number(tmp[i].new_money)
						if (tmp[i].driving_state == 4) {
							this.list2.push(tmp[i].id)
						} else {
							this.list1.push(tmp[i].id)
						}
					}
					this.tatleMoney = this.tatleMoney.toFixed(2)
				}
				let aaa = [...this.list1, ...this.list2]
				this.chooseList = aaa;
				this.listdata = tmp;
			},
			clickInfo(item, index) {
				this.listdata[index].choose = !this.listdata[index].choose;
				// 控制全选
				let tmp = this.list1;
				// 存储选择预缴集合
				let state4 = this.list2;
				if (item.choose) {
					// 根据预缴费判断
					if (item.driving_state == 4) {
						let state4 = this.spliceState4True(index);
					} else {
						tmp.push(item.id)
					}
				} else {
					if (item.driving_state == 4) {
						let state4 = this.spliceState4False(index);
					} else {
						for (let i = 0; i < tmp.length; i++) {
							if (tmp[i] == item.id) {
								tmp.splice(i, 1)
							}
						}
					}
				}
				// 数组合并
				let aaa = [...tmp, ...state4]

				if (aaa.length == this.listdata.length) {
					this.chooseAll = true
				} else {
					this.chooseAll = false
				}
				// 计算总数组的金额
				let sum = 0;
				for (let i = 0; i < aaa.length; i++) {
					for (let j = 0; j < this.listdata.length; j++) {
						if (aaa[i] == this.listdata[j].id) {
							sum += Number(this.listdata[j].new_money)
						}
					}
				}

				// return
				this.tatleMoney = sum;
				// return
				this.chooseList = aaa;
				// 计算金额
			},
			// 如果选中则删除预缴原来存在的数组元素
			spliceState4True(index) {
				let tmpAll = this.listdata;
				let state4 = this.list2;
				for (let i = 0; i < tmpAll.length; i++) {
					if (state4.includes(tmpAll[i].id)) {
						state4.splice(state4.indexOf(tmpAll[i].id), 1);
					}
				}
				// 添加在这index之前得所有id
				for (let i = 0; i <= index; i++) {
					if (this.listdata[i].driving_state == 4) {
						state4.push(this.listdata[i].id)
						this.listdata[i].choose = true
					}
				}
				return state4;
			},
			// 如果不选中则删除预缴原来存在的数组元素及改变所有状态为false，在连着第一跳数据到选中的数据
			spliceState4False(index) {
				let tmpAll = this.listdata;
				let state4 = this.list2;
				for (let i = 0; i < tmpAll.length; i++) {
					if (state4.includes(tmpAll[i].id)) {
						state4.splice(state4.indexOf(tmpAll[i].id), 1);
					}
					if (tmpAll[i].driving_state == 4) {
						tmpAll[i].choose = false
					}
				}
				this.listdata = tmpAll;
				for (let i = 0; i < index; i++) {
					if (this.listdata[i].driving_state == 4) {
						state4.push(this.listdata[i].id)
						this.listdata[i].choose = true
					}
				}
				return state4;
			},
			getInfo() {
				uni.showLoading({
					title: '加载中'
				});
				this.loading = false;
				this.$request.api.getPositionInfo({
					zhuYeApp: 1,
					...this.positionValue,
					type: 1
				}).then(res => {
					console.log(res)
					if (res.data.code === 0) {
						let tmp = []
						tmp = res.data.data.datalist;

						for (let i = 0; i < tmp.length; i++) {
							tmp[i].choose = false;
						}
						this.listdata = tmp;
					}
					this.loading = true;
					uni.hideLoading();

				})
			}
		}
	}
</script>

<style lang="scss">
	page {

		background: #F4F4F4;

		.position-info {
			background-color: #FFFFFF;
			padding: 10px 25px;
			margin-bottom: 20rpx;

			.position-name {
				font-size: 17px;
				font-weight: 550;
				color: #333333;
			}

			.position-name i {
				width: 6px;
				height: 16px;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 4px;
				display: inline-block;
				vertical-align: middle;
				margin-top: -3px;
			}

			.position {
				display: flex;

				.position-left {
					width: 106rpx;
					margin-right: 48rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.btn-big {
				margin-top: 42rpx;
				display: flex;
				text-align: center;
				justify-content: center;

				.btn-pay {
					width: 120px;
					height: 39px;
					border-radius: 25px;
					border: 1px solid #F9A832;
					font-size: 16px;
					color: #F9A832;
					line-height: 39px;
				}
			}
		}

		.list {
			height: 108rpx;
			display: flex;
			align-items: center;

			.redio {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				border: 2rpx solid #CCCCCC;
			}

			.list-detail {
				width: 85vw;
				display: flex;
				justify-content: space-between;

				.pay-count {
					font-size: 36rpx;
					font-weight: 600;
					color: #F9A832;
					align-items: center;
					margin-top: 5px;
				}

				.arrears {
					font-size: 28rpx;
					color: #FD3636;
				}

				.dates {
					font-size: 24rpx;
					color: #999999;
					margin-top: 4px;
				}

				.tobepaid {
					font-size: 28rpx;
					color: #F9A832;
				}

				.pass {
					font-size: 28rpx;
					color: #F9A832;
				}
			}
		}

		.list:last-child {
			margin-bottom: 100rpx;
		}

		.payment {
			width: 100vw;
			padding: 14rpx 30rpx;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);

			.redios {
				display: flex;
				align-items: center;

				.redio {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
					border-radius: 50%;
					border: 2rpx solid #CCCCCC;
				}

				.font-all {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.pay-all {
				align-items: center;
				display: flex;

				.amount {
					font-size: 28rpx;
					color: #FD3636;
					margin-right: 20rpx;
				}

				.btn-pay1 {
					text-align: center;
					background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
					color: #fff;
					padding: 7px 32px;
					border-radius: 16rpx;
					margin-right: 10px;
					// margin-top: 10px;
				}
			}
		}

		.bjq {
			.u-numberbox {
				display: flex !important;
				justify-content: space-between !important;
				width: 100% !important;
				border-top: 1px solid #DCDCDC;
				border-bottom: 1px solid #DCDCDC;
				padding: 40rpx 0;
			}


			.u-number-input {
				background-color: #fff !important;
			}

		}
	}
</style>